<template>
  <view>
    <view class="logo">
      <image src="/static/images/logos.png"
             mode="widthFix"
             class="logo-img"></image>
    </view>
    <view class="sgin-in">
      <view class="m-flex input-box">
        <label class="input-title">账号</label>
        <input type="text"
               v-model="form.phone"
               placeholder="请输入用户名" />
      </view>
      <view class="m-flex input-box">
        <label class="input-title">密码</label>
        <input type="password"
               v-model="form.password"
               placeholder="请输入密码" />
      </view>
      <view class="btn">
        <button @click="sginIn">登入</button>
      </view>
      <view class="reg">
        <text>还没有账号？</text>
        <text class="color-yellow"
              @click="sginUP">马上开户</text>
      </view>
      <view class="reg">
        <text>当前在线：</text>
        <text class="color-red">{{randomMath}}</text>
        <text>人</text>
      </view>
      <view class="m-flex m-row-between">
        <view @click="forget">
          忘记密码
        </view>
        <view @click="openKF(KF)">
          在线客服
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  login,
  service
} from "@/config/api.js"
export default {
  data () {
    return {
      form: {
        phone: '',
        password: ''
      },
      timer: null,
      randomMath: 0,
      KF: ''
    }
  },
  onLoad () {
    this.getRandomMath()
    this.getService()
  },
  onUnload () {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  },
  methods: {
    // 客服
    getService () {
      service().then(res => {
        console.log('客服', res);
        this.KF = res.data
        uni.setStorageSync('KF', res.data)
      })
    },
    // 登入
    sginIn () {
      const that = this;
      const {
        phone,
        password
      } = this.form;
      if (!phone) return uni.$u.toast('请输入账号')
      if (!password) return uni.$u.toast('请输入密码')
      login({
        phone: phone,
        password: password
      }, {
        custom: {
          toast: true
        }
      }).then((res) => {
        console.log('res: ', res)
        if (res.code == 1) {
          // 保存uid
          uni.setStorageSync('uid', res.data.id)
          uni.showToast({
            title: '登陆成功!',
            icon: 'success',
            duration: 2000,
            success: () => {
              setTimeout(() => {
                that.$Router.pushTab('/pages/index/index')
              }, 2000)
            }
          })
          // uni.showModal({
          // 	title: '温馨提示',
          // 	content: '登录成功',
          // 	showCancel: false,
          // 	success: res => {
          // 		that.$Router.pushTab('/pages/mine/mine')
          // 	},
          // });
        }
      }).catch((err) => {
        console.log('err: ', err)
      })
    },
    // 忘记密码
    forget () {
      uni.showModal({
        title: '提示',
        content: '忘记密码请联系客服！',
        showCancel: false,
        success: res => { },
        fail: () => { },
        complete: () => { }
      });
    },
    // 打开客服
    openKF (value) {
      window.open(value)
    },
    // 注册
    sginUP () {
      this.$Router.push('/pages/login/reg')
    },
    // 获取随机数
    getRandomMath () {
      this.timer = setInterval(() => {
        this.randomMath = '412' + Math.ceil(Math.random() * 1000)
        // console.log('this.randomMath: ', this.randomMath)
      }, 1000)
    }
  }

}
</script>

<style scoped lang="scss">
  page {
    background-color: #21212b !important;
  }

  .logo {
    width: 100%;
    height: 450rpx;
    box-sizing: border-box;
    padding: 200rpx 0 0 30rpx;
    // border: 1px solid #fff;

    .logo-img {
      width: 300rpx;
    }
  }

  .sgin-in {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 48rpx 40rpx;
    // border: 1px solid #fff;

    .input-box {
      width: 100%;
      height: 116rpx;
      line-height: 116rpx;
      border-bottom: 1px solid $uni-border-color;
      margin-bottom: 44rpx;

      .input-title {
        flex: 0 0 120rpx;
        padding: 30rpx 60rpx 30rpx 30rpx;
      }
    }

    .btn {
      width: 100%;
      height: 100%;

      button {
        background-color: $uni-btn-color;
      }
    }

    .reg {
      margin: 60rpx 0;
      text-align: center;
      color: #fff;

      .color-yellow {
        color: $uni-text-color-yellow;
      }

      .color-red {
        color: red;
      }
    }
  }
</style>
